<!DOCTYPE html>
<html lang="zh-CN">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  
  
  <title>文档类型声明标签 | 月蝉の小窝</title>
  
  <meta name="author" content="月蝉" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="前端, 基础" />
  
  <meta name="description" content="标签定义及使用说明在 HTML 中，&lt;!DOCTYPE&gt; 声明是文档类型声明（Document Type Declaration）的缩写，用于指示浏览器当前页面使用的HTML版本。&lt;!DOCTYPE&gt; 声明位于文档中的最前面的位置，处于 &lt;html&gt; 标签之前。&lt;!DOCTYPE&gt; 声明不是一个 HTML 标签，因此不需要关闭标签。。在 HTML 4">
<meta property="og:type" content="article">
<meta property="og:title" content="文档类型声明标签">
<meta property="og:url" content="https://moon-cicada.gitee.io/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/index.html">
<meta property="og:site_name" content="月蝉の小窝">
<meta property="og:description" content="标签定义及使用说明在 HTML 中，&lt;!DOCTYPE&gt; 声明是文档类型声明（Document Type Declaration）的缩写，用于指示浏览器当前页面使用的HTML版本。&lt;!DOCTYPE&gt; 声明位于文档中的最前面的位置，处于 &lt;html&gt; 标签之前。&lt;!DOCTYPE&gt; 声明不是一个 HTML 标签，因此不需要关闭标签。。在 HTML 4">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-10-31T03:36:30.000Z">
<meta property="article:modified_time" content="2023-10-31T03:49:36.581Z">
<meta property="article:author" content="月蝉">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="基础">
<meta name="twitter:card" content="summary">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/blog/css/kratosr.min.css" media="all"></script>
  
    <link rel="stylesheet" id="darkmode-css" href="/blog/css/kr-color-dark.min.css" media="(prefers-color-scheme: dark)"></script>
    <script src="/blog/js/kr-dark.min.js"></script>
  
  
    <link rel="stylesheet" id="highlight-css" href="/blog/css/highlight/night-eighties.min.css" media="all"></script>
  
  <link rel="stylesheet" id="fontawe-css" href="/blog/vendors/font-awesome@4.7.0/css/font-awesome.min.css" media="all"></script>
  <link rel="stylesheet" id="nprogress-css" href="/blog/vendors/nprogress@0.2.0/nprogress.css" media="all"></script>
  
  
    <link rel="stylesheet" href="/blog/vendors/aplayer@1.10.1/dist/APlayer.min.css"></script>
  
  
    <link rel="stylesheet" href="/blog/vendors/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"></script>
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="/blog/vendors/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="/blog/vendors/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
    
  </style>
  
<meta name="generator" content="Hexo 6.3.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                    
                                        
                                            <li><a href="/blog/"><i class="fa fa-home"></i>首页</a></li>
                                        
                                    
                                        
                                            <li><a href="/blog/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                        
                                    
                                        
                                            <li><a href="/blog/about/"><i class="fa fa-paper-plane"></i>关于我</a></li>
                                        
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/blog/">月蝉の小窝</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/blog/">
                        <h2>月蝉の小窝</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article itemscope itemtype="https://schema.org/Article">
    
    <link itemprop="mainEntityOfPage" href="https://moon-cicada.gitee.io/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/">
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center" itemprop="name headline">文档类型声明标签</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><time datetime="2023-10-31T03:36:30.000Z" itemprop="datePublished"><i class="fa fa-calendar"></i> 2023-10-31</time></li>
                <li itemprop="author" itemscope itemtype="https://schema.org/Person">
                    <i class="fa fa-user"></i> 作者 <span itemprop="name">月蝉</span>
                </li>
                
                    <li>
                        <i class="fa fa-edit"></i> 
                        
                        
                            ~2.17K
                        
                        字
                    </li>
                
                
                    <li id="/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/" class="leancloud_visitors" data-flag-title="文档类型声明标签">
                        <i class="fa fa-eye"></i>
                        <span class="leancloud-visitors-count"> </span> 次阅读
                    </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                <div class="icon"><i class="fa fa-warning"></i></div>
                <div class="text"><p>本文最后编辑于 <time datetime="1698724176581"></time> 前，其中的内容可能需要更新。</p></div>
            </div>
            
            
            
                <div class="kratos-post-inner-toc toc-div-class" >
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E5%AE%9A%E4%B9%89%E5%8F%8A%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E"><span class="toc-number">1.</span> <span class="toc-text">标签定义及使用说明</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html4-01%E4%B8%8Ehtml5%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82"><span class="toc-number">2.</span> <span class="toc-text">html4.01与html5之间的差异</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E7%9A%84DOCTYPE%E5%A3%B0%E6%98%8E"><span class="toc-number">3.</span> <span class="toc-text">常见的DOCTYPE声明</span></a></li></ol>
                </div>
            
            <hr />
            <div itemprop="articleBody"><h2 id="标签定义及使用说明"><a href="#标签定义及使用说明" class="headerlink" title="标签定义及使用说明"></a>标签定义及使用说明</h2><p>在 HTML 中，&lt;!DOCTYPE&gt; 声明是文档类型声明（Document Type Declaration）的缩写，用于指示浏览器当前页面使用的HTML版本。<br>&lt;!DOCTYPE&gt; 声明位于文档中的最前面的位置，处于 &lt;html&gt; 标签之前。<br>&lt;!DOCTYPE&gt; 声明不是一个 HTML 标签，因此不需要关闭标签。。<br>在 HTML 4.01 及之前版本中，&lt;!DOCTYPE&gt; 声明可能会指向 DTD（文档类型定义）文件，它定义了文档的结构和元素规则。因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。<br>HTML5 不是基于 SGML，因此不再依赖 DTD 文件，而是使用更简单的声明。</p>
<blockquote>
<p>&lt;!DOCTYPE&gt; 标签没有结束标签。<br>&lt;!DOCTYPE&gt; 声明不区分大小写。</p>
</blockquote>
<h2 id="html4-01与html5之间的差异"><a href="#html4-01与html5之间的差异" class="headerlink" title="html4.01与html5之间的差异"></a>html4.01与html5之间的差异</h2><p>HTML 4.01 规定了三种不同的 &lt;!DOCTYPE&gt;声明，分别是：Strict、Transitional 和 Frameset。<br>HTML5 中仅规定了一种：&lt;!DOCTYPE html&gt;</p>
<h2 id="常见的DOCTYPE声明"><a href="#常见的DOCTYPE声明" class="headerlink" title="常见的DOCTYPE声明"></a>常见的DOCTYPE声明</h2><ul>
<li>HTML 5<blockquote>
<p>&lt;!DOCTYPE html&gt;</p>
</blockquote>
</li>
<li>HTML 4.01 Strict<br>这个DTD包含所有HTML元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。<blockquote>
<p>&lt;!DOCTYPE HTML PUBLIC “-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD HTML 4.01&#x2F;&#x2F;EN” “<a target="_blank" rel="noopener" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>“&gt;</p>
</blockquote>
</li>
<li>HTML 4.01 Transitional<br>这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。<blockquote>
<p>&lt;!DOCTYPE HTML PUBLIC “-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD HTML 4.01 Transitional&#x2F;&#x2F;EN” “<a target="_blank" rel="noopener" href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>“&gt;</p>
</blockquote>
</li>
<li>HTML 4.01 Frameset<br>这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。<blockquote>
<p>&lt;!DOCTYPE HTML PUBLIC “-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD HTML 4.01 Frameset&#x2F;&#x2F;EN” “<a target="_blank" rel="noopener" href="http://www.w3.org/TR/html4/frameset.dtd">http://www.w3.org/TR/html4/frameset.dtd</a>“&gt;</p>
</blockquote>
</li>
<li>XHTML 1.0 Strict<br>这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。<blockquote>
<p>&lt;!DOCTYPE html PUBLIC “-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Strict&#x2F;&#x2F;EN” “<a target="_blank" rel="noopener" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>“&gt;</p>
</blockquote>
</li>
<li>XHTML 1.0 Transitional<br>这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。<blockquote>
<p>&lt;!DOCTYPE html PUBLIC “-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Transitional&#x2F;&#x2F;EN” “<a target="_blank" rel="noopener" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>“&gt;</p>
</blockquote>
</li>
<li>XHTML 1.0 Frameset<br>这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。<blockquote>
<p>&lt;!DOCTYPE html PUBLIC “-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Frameset&#x2F;&#x2F;EN” “<a target="_blank" rel="noopener" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd</a>“&gt;</p>
</blockquote>
</li>
<li>XHTML 1.1<br>这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。<blockquote>
<p>&lt;!DOCTYPE html PUBLIC “-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.1&#x2F;&#x2F;EN” “<a target="_blank" rel="noopener" href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>“&gt;</p>
</blockquote>
</li>
</ul>
</div>
        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5 itemprop="copyrightNotice">本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://moon-cicada.gitee.io/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://moon-cicada.gitee.io/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/";
            const title         = "「文档类型声明标签」";
            const excerpt       = `标签定义及使用说明在 HTML 中，&lt;!DOCTYPE&gt; 声明是文档类型声明（Document Type Declaration）的缩写，用于指示浏览器当前页面使用的HTML版本。&lt;!DOCTYPE&gt; 声明位于...`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a>, <a class="tag-none-link" href="/blog/tags/%E5%9F%BA%E7%A1%80/" rel="tag">基础</a>
                </div>
                <div class="pull-date">
                    <time datetime="2023-10-31T03:49:36.581Z" itemprop="dateModified">最后编辑：2023-10-31</time>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" html基础" href="/blog/2023/10/31/HTML/html基础/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" HTTP基础" href="/blog/2023/11/03/HTTP/HTTP基础/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
        <div id="v-comments" class="post-comments"></div>
<script>
    var load_comm = () => {
        const init = () => {
            new Valine({
                el: '#v-comments',
                appId: 'cM5eOxMg63PZfmD94zakD07F-gzGzoHsz',
                appKey: 'Ig7h0RQDY2duLi5iYpxbM1ZW',
                visitor: true,
                enableQQ: true,
                path: '/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/'
            });
        }
        if (typeof Valine === 'undefined') {
            const src = '/blog/vendors/valine@1.4.18/dist/Valine.min.js';
            $.getScript(src, init);
        } else {
            init();
        }
    };
</script>
<noscript>Please enable JavaScript to view the <a target="_blank" rel="noopener" href="https://valine.js.org/">comments powered by Valine.</a></noscript>

    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="/blog/images/avaths.webp" loading="lazy" decoding="auto" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/blog/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                6
            </span>
        </a>
        <a class="meta-item" href="/blog/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                4
            </span>
        </a>
        <a class="meta-item" href="/blog/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                6
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                    <aside id="krw-toc" class="widget widget-kratos-toc clearfix toc-div-class" >
    <div class="photo-background"></div>
    <h4 class="widget-title no-after">
        <i class="fa fa-compass"></i>
        文章目录
        <span class="toc-progress-bar" role="progressbar" aria-label="阅读进度："></span>
    </h4>
    <div class="textwidget">
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E5%AE%9A%E4%B9%89%E5%8F%8A%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E"><span class="toc-text">标签定义及使用说明</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#html4-01%E4%B8%8Ehtml5%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82"><span class="toc-text">html4.01与html5之间的差异</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E7%9A%84DOCTYPE%E5%A3%B0%E6%98%8E"><span class="toc-text">常见的DOCTYPE声明</span></a></li></ol>
    </div>
</aside>
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/HTTP/">HTTP</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Hello/">Hello</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/html/">html</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/">浏览器原理</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/blog/tags/Chrome/" style="font-size: 0.7em;">Chrome</a> <a href="/blog/tags/HTTP/" style="font-size: 0.6em;">HTTP</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 0.7em;">前端</a> <a href="/blog/tags/%E5%8D%8F%E8%AE%AE/" style="font-size: 0.6em;">协议</a> <a href="/blog/tags/%E5%8E%9F%E7%90%86/" style="font-size: 0.7em;">原理</a> <a href="/blog/tags/%E5%9F%BA%E7%A1%80/" style="font-size: 0.8em;">基础</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/blog/2023/11/03/HTTP/HTTP%E5%9F%BA%E7%A1%80/"><i class="fa  fa-book"></i> HTTP基础</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/"><i class="fa  fa-book"></i> 文档类型声明标签</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/"><i class="fa  fa-book"></i> html基础</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/"><i class="fa  fa-book"></i> 浏览器渲染原理</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF/"><i class="fa  fa-book"></i> 事件循环</a>
            
          
        
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        <!-- Keep for compatibility -->
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        <!-- New links -->
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2023 月蝉の小窝 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by 月蝉.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/blog/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
                    <div class="box theme-box" id="snow-switch">
                        <span class="fa fa-snowflake-o"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="/blog/vendors/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="/blog/vendors/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/blog/";
</script>

    <div>
        <canvas id="snow"></canvas>
        <script async src="/blog/js/snow.min.js"></script>
    </div>


    <script async src="/blog/js/candy.min.js"></script>



    <script defer src="/blog/vendors/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="/blog/vendors/meting@2.0.1/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="playlist"
        id="3204190542"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="/blog/vendors/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="/blog/js/kratosr.min.js"></script>
<script defer src="/blog/js/pjax.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>